<template>
  <div class="tabs betweenbox ">
    <div class="tabs-item  centerbox"
         @click="clickEvent(item)"
         v-for="(item,index) in tabsDataList"
         :class="{'tabs-active':item.active}"
         :key="index">{{item.name}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";
interface tabItem {
  id: string;
  name: string;
  active: Boolean;
  flag:string;
}
@Component
export default class extends Vue {
  // tabs数据集合
  tabsDataList: tabItem[] = [
    {
      id: "fzjk",
      name: "辅助监控",
      active: true,
      flag:''
    },
    {
      id: "zxjc",
      name: "在线监测",
      active: false,
      flag:'online'
    },
    {
      id: "jqr",
      name: "机器人",
      active: false,
      flag:'robot'
    },
    {
      id: "sxt",
      name: "摄像头",
      active: false,
      flag:'camera'
    },
    {
      id: "qt",
      name: "其它",
      active: false,
      flag:'other'
    }
  ];
  //点击事件
  clickEvent(item: tabItem): void {
    this.tabsDataList.forEach(v => {
      v.active = false;
    });
    item.active = true;
    this.$emit('clickEvent',item.id,item.flag)

    ParameterManagementModule.setTreeId('station')
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
  height: 0.32rem;
  background: url(../../../../../assets/img/ParameterManagement/border.png);
  background-size: 100% 100%;
  &-item {
    // border-right: 1px #0276c0 solid;
    // border-bottom: 1px #0276c0 solid;
    flex: 1;
    box-sizing: border-box;
    cursor: pointer;
    color: #97989c;
    transition: all 800ms;
  }
  &-item:last-child {
    border-right: none;
  }
  &-active {
    color: #fff;
    background: linear-gradient(360deg, rgba(20, 123, 252, 1) 0%, rgba(12, 157, 254, 1) 40%, rgba(3, 191, 255, 1) 100%);
  }
}
</style>

